<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 echarts.js -->
    <script src="echarts-5.0.1/dist/echarts.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%; height: 95vh;position:relative"></div>
<div id="main1" style="width: 45%; height: 82vh;position:absolute;top:0px;left: 22%"></div>
<div id="main2" style="width: 30%; height: 82vh;position:absolute;top:0px;left: 68%"></div>
<div></div>
<script>
    var myChart = echarts.init(document.getElementById('main'));


    var uploadedDataURL = 'home.json';

    var colors = [
        ['#1DE9B6', '#F46E36', '#04B9FF', '#5DBD32', '#FFC809', '#FB95D5', '#BDA29A', '#6E7074', '#546570', '#C4CCD3'],
        [
            '#37A2DA',
            '#67E0E3',
            '#32C5E9',
            '#9FE6B8',
            '#FFDB5C',
            '#FF9F7F',
            '#FB7293',
            '#E062AE',
            '#E690D1',
            '#E7BCF3',
            '#9D96F5',
            '#8378EA',
            '#8378EA',
        ],
        [
            '#DD6B66',
            '#759AA0',
            '#E69D87',
            '#8DC1A9',
            '#EA7E53',
            '#EEDD78',
            '#73A373',
            '#73B9BC',
            '#7289AB',
            '#91CA8C',
            '#F49F42',
        ],
    ];
    var colorIndex = 0;
    $(function () {
        var year = ['正常签到', '请假', '迟到', '旷课', '进图书馆'];

        var mapData = [[], [], [], [], []];

        /*柱子Y名称*/
        var categoryData = [];
        var fei = [];
        var rong = [];
        var barData = [];
        // 接口 analysis/situationCount 里面的 lineData1
        var lineData1 = [
            [10, 12, 13, 12, 14, 14, 16, 17, 18, 20, 22, 26],
            [68, 67, 66, 63, 61, 55, 53, 48, 46, 44, 42, 42],
            [1, 1, 1, 1, 1, 1, 1, 2, 3, 2, 1, 1],
            [56, 59, 60, 62, 56, 50, 40, 42, 38, 38, 39, 38],
            [1, 1, 2, 1, 5, 10, 20, 24, 30, 32, 32, 34],
        ];
        // 接口 analysis/situationCount 里面的 lineData1
        var lineData2 = [
            [11, 12, 14, 12, 15, 13, 16, 16, 16, 21, 22, 24],
            [62, 64, 66, 65, 62, 58, 54, 49, 45, 44, 41, 40],
            [1, 1, 1, 2, 1, 1, 1, 2, 1, 2, 1, 1],
            [58, 59, 62, 62, 54, 50, 44, 42, 34, 33, 35, 38],
            [1, 1, 1, 1, 6, 12, 20, 22, 30, 33, 32, 35],
        ];

        var tian = [[], [], [], [], []];


        var jian = [];
        var count = [];
        var datamax = [];
        var datamin = [];
        //visualMap的max正常值设定
        var zhu = [45, 80, 10, 80, 50];
        //visualMap的min正常值设定
        var li = [-5, 15, 0, 20, 0];

        //接口 analysis/situationCount 里面的avgCount
        var avgCount =[30, 15, 16, 18, 29]
        //接口 analysis/situationCount 里面的maxCount
        var maxCount =[50, 36, 27, 29, 40]
        //接口 analysis/situationCount 里面的minCount
        var minCount =[10, 11, 9, 13, 19]

        //接口 analysis/situationCount 里面的countAll
        var countAll = [60 ,70 ,31 ,42 ,45]

        //接口 analysis/situationCount 里面的 normalMax
        var normalMax = [24, 13, 10, 42, 23];
        //接口 analysis/situationCount 里面的 normalMin
        var normalMin = [2, 4, 1, 4, 0];
        //var count2=[];
        var count3 = [];
        for (var i = 0; i < mapData.length; i++) {
            mapData[i].sort(function sortNumber(a, b) {
                return a.value - b.value;
            });
            barData.push([]);
            categoryData.push([]);
            fei.push([]);
            rong.push([]);
            tian.push([]);
            jian[i] = 0;
            count[i] = 0;
            count3[i] = 0;
            datamax[i] = 0;
            datamin[i] = 1000;
        }

        $.getJSON(uploadedDataURL, function (geoJson) {
            echarts.registerMap('home', geoJson);

            optionXyMap01 = {
                //底部滚动栏
                timeline: {
                    data: year,
                    axisType: 'category',
                    autoPlay: true,
                    playInterval: 3000,
                    left: '10%',
                    right: '10%',
                    bottom: '3%',
                    width: '80%',
                    label: {
                        normal: {
                            textStyle: {
                                color: '#ddd',
                            },
                        },
                        emphasis: {
                            textStyle: {
                                color: '#fff',
                            },
                        },
                    },
                    symbolSize: 10,
                    lineStyle: {
                        color: '#555',
                    },
                    checkpointStyle: {
                        borderColor: '#87CEEB',
                        borderWidth: 2,
                    },
                    controlStyle: {
                        showNextBtn: true,
                        showPrevBtn: true,
                        normal: {
                            color: '#666',
                            borderColor: '#666',
                        },
                        emphasis: {
                            color: '#aaa',
                            borderColor: '#aaa',
                        },
                    },
                },
                baseOption: {
                    animation: true,
                    animationDuration: 1000,
                    animationEasing: 'cubicInOut',
                    animationDurationUpdate: 1000,
                    animationEasingUpdate: 'cubicInOut',
                    //柱状图样式
                    grid: [
                        {
                            left: '5%',
                            top: '8%',
                            bottom: '55%',
                            width: '20%',
                        },
                        {
                            gridindex: 1,
                            left: '5%',
                            right: '65%',
                            top: '50%',
                            bottom: '15%',
                            containLabel: true,
                        },
                    ],
                    tooltip: {
                        trigger: 'axis', // hover触发器
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                            shadowStyle: {
                                color: '#aaa', //hover颜色
                            },
                        },
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {
                                show: true,
                            },
                            dataView: {
                                show: true,
                                readOnly: false,
                            },
                            magicType: {
                                show: true,
                                type: ['bar', 'line'],
                            },
                            restore: {
                                show: true,
                            },
                            saveAsImage: {
                                show: true,
                            },
                        },
                    },
                    legend: [
                        {
                            data: ['历史平均数据1', '历史平均数据2'],
                            x: '14%',
                            y: '42%',
                            textStyle: {
                                color: '#fff',
                            },
                        },

                        {
                            icon: 'roundRect',
                            orient: 'vertical',
                            top: '40%',
                            left: '5%',

                            textStyle: {
                                color: '#fff',
                            },
                        },
                    ],

                },

                options: [],
            };

            for (var n = 0; n < year.length; n++) {
                optionXyMap01.options.push({
                    //背景色
                    backgroundColor: '#013954',

                    //标题
                    title: [
                        {
                            text: '成绩分析图',
                            left: '45%',
                            top: '0%',
                            textStyle: {
                                color: '#fff',
                                fontSize: 25,
                            },
                        },
                        {
                            id: 'statistic',
                            text: year[n] + '数据统计情况',
                            left: '10%',
                            top: '5%',
                            textStyle: {
                                color: '#fff',
                                fontSize: 25,
                            },
                        },
                        {
                            text: '平均值：' + avgCount[n],
                            left: '5%',
                            top: '13%',
                            textStyle: {
                                color: '#90ee90',
                                fontSize: 15,
                            },
                        },
                        {
                            text: '总计：' + countAll[n],
                            left: '5%',
                            top: '18%',
                            textStyle: {
                                color: '#FFFF00',
                                fontSize: 25,
                            },
                        },
                        {
                            text: '最大值：' + maxCount[n],
                            left: '18%',
                            top: '13%',
                            textStyle: {
                                color: '#FF4500',
                                fontSize: 15,
                            },
                        },
                        {
                            text: '最小值：' + minCount[n],
                            left: '28%',
                            top: '13%',
                            textStyle: {
                                color: '#87CEFF',
                                fontSize: 15,
                            },
                        },
                        {
                            text: '(数据正常范围：' + normalMin[n] + '~' + normalMax[n] + ')',
                            left: '13%',
                            top: '26%',
                            textStyle: {
                                color: '#FFA54F',
                                fontSize: 15,
                            },

                            extraCssText: 'width:120px; white-space:pre-wrap', //额外样式使\n生效
                        },
                    ],
                    visualMap: {
                        min: li[n],
                        max: zhu[n],
                        calculable: true,
                        text: ['High', 'Low'],
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d'],
                        },
                        padding: 5,
                        right: '65%',
                        top: '22%',
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    xAxis: [
                        {
                            type: 'value',
                            scale: true,
                            position: 'top',
                            min: 0,
                            boundaryGap: false,
                            splitLine: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                margin: 2,
                                textStyle: {
                                    color: '#fff',
                                },
                            },
                        },
                        {
                            gridIndex: 1,
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                margin: 2,
                                textStyle: {
                                    color: '#fff',
                                },
                            },
                            data: [
                                '一月',
                                '二月',
                                '三月',
                                '四月',
                                '五月',
                                '六月',
                                '七月',
                                '八月',
                                '九月',
                                '十月',
                                '十一月',
                                '十二月'
                            ],
                        },
                    ],
                    yAxis: [
                        {
                            type: 'category',
                            //  name: 'TOP 20',
                            nameGap: 16,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#ddd',
                                },
                            },
                            axisTick: {
                                show: false,
                                lineStyle: {
                                    color: '#ddd',
                                },
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    color: '#ddd',
                                },
                            },
                            data: categoryData[n],
                        },
                        {
                            gridIndex: 1,
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} ',
                                textStyle: {
                                    color: '#ddd',
                                },
                            },
                        },
                        //我加的
                    ],

                    series: [
                        //地图
                        //地图中闪烁的点
                        //柱状图
                        {
                            zlevel: 1.5,
                            type: 'bar',
                            symbol: 'none',
                            itemStyle: {
                                normal: {
                                    color: colors[colorIndex][n],
                                },
                            },
                            data: barData[n],
                        },
                        {
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            name: '历史平均数据1',

                            type: 'line',
                            lineStyle: {
                                normal: {
                                    color: '#4ea397',
                                },
                            },
                            data: lineData1[n],
                            markPoint: {
                                data: [
                                    {
                                        type: 'max',
                                        name: '最大值',
                                        symbolSize: 40,
                                    },
                                    {
                                        type: 'min',
                                        name: '最小值',
                                        symbolSize: 20,
                                    },
                                ],
                                itemStyle: {
                                    normal: {
                                        color: '#d0648a',
                                    },
                                },
                            },
                            markLine: {
                                data: [
                                    {
                                        type: 'average',
                                        name: '平均值',
                                    },
                                ],
                            },
                        },
                        {
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            name: '历史平均数据2',

                            type: 'line',
                            lineStyle: {
                                normal: {
                                    color: '#4ea397',
                                },
                            },
                            data: lineData2[n],
                            markPoint: {
                                data: [
                                    {
                                        type: 'max',
                                        name: '最大值',
                                        symbolSize: 40,
                                    },
                                    {
                                        type: 'min',
                                        name: '最小值',
                                        symbolSize: 20,
                                    },
                                ],
                                itemStyle: {
                                    normal: {
                                        color: '#d0648a',
                                    },
                                },
                            },
                            markLine: {
                                data: [
                                    {
                                        type: 'average',
                                        name: '平均值',
                                    },
                                ],
                            },
                        },
                    ],
                });
            }
            myChart.setOption(optionXyMap01);
        });
    });

</script>
<script>
    var myChart1 = echarts.init(document.getElementById('main1'));
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {
            left: '41%',
            top: '8%',
            textStyle: {
                color: '#ffffff'
            }
        },
        grid: {
            left: '38%',
            right: '0%',
            bottom: '0%',
            top: '15%',
            containLabel: true
        },
        xAxis: [{
            type: 'value'
        },
            {
                type: 'value',
            }],
        yAxis: [{
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        }],
        series: [
            {
                name: '正常签到',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                // 接口 analysis/situationCount 里面的 oneNum
                data: [320, 302, 301, 334, 390, 330, 320, 320, 320, 320, 320, 320]
            },
            {
                name: '请假',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                // 接口 analysis/situationCount 里面的 twoNum
                data: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 210, 210]
            },
            {
                name: '迟到',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                // 接口 analysis/situationCount 里面的 threeNum
                data: [220, 182, 191, 234, 290, 330, 310, 210, 210, 210, 210, 210]
            },
            {
                name: '旷课',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                // 接口 analysis/situationCount 里面的 fourNum
                data: [150, 212, 201, 154, 190, 330, 410, 410, 410, 410, 410, 410]
            },
            {
                name: '进图书馆',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                // 接口 analysis/situationCount 里面的 fiveNum
                data: [820, 832, 901, 934, 1290, 1330, 1320, 410, 410, 410, 410, 410]
            }
            ,
            {
                name: '分数',
                type: 'line',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                // 接口 analysis/situationCount 里面的 sixNum
                data: [820, 832, 901, 934, 320, 750, 540, 410, 410, 410, 410, 410]
            }
        ]
    };
    myChart1.setOption(option);
</script>
<script>
    var myChart2 = echarts.init(document.getElementById('main2'));
    option = {
        xAxis: {
            type: 'category',
            // 接口 analysis/situationAnalysis  里面的 title
            data: ['正常签单', '正常签到 迟到', '正常签到 请假', '迟到', '进图书馆']
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            left: '0%',
            right: '10%',
            bottom: '0%',
            top: '15%',
            containLabel: true
        },
        series: [
            {   // 接口 analysis/situationAnalysis  里面的 num
                data: [120, 200, 150, 80, 70],
                type: 'bar'
            }
        ]
    };
    myChart2.setOption(option);
</script>
</body>
</html>
